<!--
 * @Author: 周艳凯 484894717@qq.com
 * @Date: 2025-03-18 15:33:57
 * @LastEditors: 周艳凯 484894717@qq.com
 * @LastEditTime: 2025-04-02 20:24:16
 * @FilePath: \BusStopBoard.Webd:\360MoveData\Users\75041\Desktop\uniapp框架\my-project\src\pages\index\text\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <view class="text-wrapper">
        <view :animation="animationData" @transitionend="loopAnimation" :class="[{ roll: isOverflowed }, 'wneben']">{{ text }}</view>
    </view>
</template>

<script>
export default {
    props: {
        text: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            isOverflowed: false,
            animationData: {}
        }
    },
    mounted() {
        this.init()
    },
    watch: {
        text() {
            this.init()
        }
    },
    methods: {
        init() {
            setTimeout(() => {
                const query = uni.createSelectorQuery().in(this)
                let wrapperWidth, textWidth
                query.select('.text-wrapper')
                    .boundingClientRect(data => {
                        wrapperWidth = data.width
                    })
                    .select('.wneben')
                    .boundingClientRect(data => {
                        textWidth = data.width
                    })
                    .exec(() => {
                        this.isOverflowed = textWidth > wrapperWidth
                        if (this.isOverflowed) {
                            this.startAnimation()
                        }
                    })
            }, 300)
        },
        // 开始动画
        startAnimation() {
            var animation = uni.createAnimation({
                duration: 15000,
                timingFunction: 'linear',
            })
            // 定义动画序列
            animation
                .translate3d('100%', 0, 0).step({ duration: 0 })  // 初始状态
                .translate3d('-100%', 0, 0).step({ duration: 15000 }) // 结束状态
            this.animationData = animation.export()

            setTimeout(() => {
              this.loopAnimation()
            }, 15000);
        },
        loopAnimation() {
            // 动画结束后重置位置
            const animation = uni.createAnimation({
                duration: 0,
                timingFunction: 'linear'
            })
            animation
            .translate3d("100%", 0, 0).step({ duration: 0 })  // 初始状态
            this.animationData = animation.export()
            console.log('我重置动画了')
            // this.startAnimation()
            // // 下一帧重新开始动画
            this.$nextTick(() => {
                console.log('我又开始滚动了是不是')
                this.startAnimation()
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.text-wrapper {
    overflow: hidden;
    width: 100%;
}

.wneben {
    display: inline-block;
    white-space: nowrap;
}

.roll {
    // animation: scroll 15s linear infinite;
    /* 延长动画时间降低帧率 */
    // transform: translateZ(0);
    // will-change: transform; /* 预声明变更属性 */
    // backface-visibility: hidden;
    // position: absolute; /* 脱离文档流 */
    // white-space: nowrap; /* 防止文字换行重排 */
    // pointer-events: none; /* 禁用点击避免触控冲突 */
    /* 替代 translate3d 的硬件加速方案 */
}

// @keyframes scroll {
//     0% { transform: translate3d(0%,0,0); }
//     100% { transform: translate3d(-100%,0,0); }
// }</style>